<script setup>
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('cp')

// 监听单个数据
watch(count, (newVal,oldVal)=>{
  console.log({newVal,oldVal})
})

// 监听多个数据
watch([count,name],([newCount, newName],
[oldCount,oldName])=>{
  console.log({newCount,oldCount,newName, oldName})
})

// immediate 立即侦听
watch(count,(newVal,oldVal)=>{
  console.log('立即侦听',{newVal,oldVal})
},{
  immediate: true
})

const changeCount = ()=>{
  count.value++
}

// deep 深度侦听
const state = ref({
  count: 0
})
const changeStateCount = ()=>{
  state.value.count++
}
watch(state,(newVal, oldVal)=>{
  console.log({newVal, oldVal})
  console.log(newVal.count)
},{
  deep: true
})

</script>

<template>
<div>{{count}}</div>
<div>{{state.count}}</div>
<button @click="changeCount">点击</button>
<button @click="changeStateCount">点击</button>
</template>

<style scoped>

</style>
